<template>
  <div class="store_year_plan_container">
    <!--  -->
    <div class="first_container">
      <span style="margin-right: 10px">年月</span>
      <el-date-picker
        v-model="yearMonthPickerSelectValue"
        type="month"
        placeholder="选择日期"
        format="yyyy-MM"
        value-format="yyyy-MM"
      >
      </el-date-picker>
      <span style="margin-left: 10px; margin-right: 10px">店铺</span>
      <el-select v-model="storePullSelectvalue" clearable placeholder="请选择">
        <el-option
          v-for="item in storePullSelectList"
          :key="item.id"
          :label="item.no + ' ' + item.name"
          :value="item.no"
        >
        </el-option>
      </el-select>
    </div>
    <!-- 线 -->
    <p class="line"></p>
    <div class="second_container">
      <el-button type="primary" icon="el-icon-search" @click="queryBtnClick"
        >查询</el-button
      >
      <el-button icon="el-icon-folder-checked" @click="keepBtnClick"
        >保存</el-button
      >
      <el-button icon="el-icon-plus" @click="addBtnClick">增行</el-button>
    </div>

    <div class="third_container">
      <!-- 左边表格 -->
      <div class="first_table_container">
        <el-table
          class="left_table"
          v-if="isShowQueryTable"
          height="77vh"
          :data="leftTableData"
          style="width: 100%"
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '30px' }"
          @row-click="leftTableRowClick"
        >
          <el-table-column prop="year" label="年份" width="200" align="center">
          </el-table-column>
          <el-table-column label="总目标(万)" width="180" align="center">
            <!-- 自定义 -->
            <template slot-scope="scope">
              <el-input
                placeholder="请输入内容"
                v-model.number="scope.row.target"
                @blur="leftTableInputBlur(scope.row)"
              >
              </el-input>
            </template>
          </el-table-column>
        </el-table>
        <!-- 点击添加的时候，表格的数据 -->
        <el-table
          class="add_table"
          v-if="isShowAddTable"
          height="77vh"
          :data="addLeftTableData"
          style="width: 100%"
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '30px' }"
          @row-click="handleAddTableRowClick"
          highlight-current-row
        >
          <el-table-column label="年份" width="200" align="center">
            <!-- 自定义 -->
            <template slot-scope="scope">
              <el-date-picker
                v-model="scope.row.year"
                type="year"
                placeholder="选择年"
                format="yyyy"
                value-format="yyyy"
              >
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column
            prop="styleNumber"
            label="总目标(万)"
            width="180"
            align="center"
          >
            <!-- 自定义 -->
            <template slot-scope="scope">
              <el-input
                placeholder="请输入内容"
                v-model.number="scope.row.target"
              >
              </el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <p class="table_line"></p>
      <!-- 中间表格 -->
      <div class="second_table_container">
        <el-table
          height="77vh"
          :data="middleTableData"
          style="width: 100%"
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '30px' }"
          @row-click="middleTableRowClick"
          highlight-current-row
          class="middle_table"
        >
          <el-table-column prop="year" label="年份" width="180" align="center">
          </el-table-column>
          <el-table-column label="年目标(万)" width="300" align="center">
            <!-- 自定义 -->
            <template slot-scope="scope">
              <el-input
                placeholder="请输入内容"
                v-model.number="scope.row.target"
                @blur="middleTableInputBlur(scope.row)"
              >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="directSaleName"
            label="店铺"
            width="300"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>
      <p class="table_line"></p>
      <!-- 右边表格 -->
      <div class="thrid_table_container">
        <el-table
          height="77vh"
          :data="rightTableData"
          style="width: 100%"
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '30px' }"
          highlight-current-row
          class="right_table"
        >
          <el-table-column width="200" align="center" type="index" label="月份">
          </el-table-column>
          <el-table-column label="月目标(万)" width="300" align="center">
            <!-- 自定义 -->
            <template slot-scope="scope">
              <el-input
                placeholder="请输入内容"
                v-model.number="scope.row.target"
                @change="rightTableInputBlur(scope.row)"
              >
              </el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
// 页面接口
import {
  get_store_no_data_api,
  query_year_plan_data_api,
  keep_year_target_data_api,
  edit_year_target_data_api,
  edit_store_year_target_data_api,
  edit_store_month_target_data_api
} from '../../../request/manage_ment/store_year_plan_request.js'
// mixins
import today from '../../../components/mixins/today.js'
export default {
  mixins: [today],
  data() {
    return {
      // 年月
      yearMonthPickerSelectValue: '',
      //   店铺下拉框选中的值和数组
      storePullSelectvalue: '',
      storePullSelectList: [],
      //   控制添加数据表格的显示和隐藏
      isShowAddTable: false,
      // 控制查询表格的显示和隐藏
      isShowQueryTable: true,
      // 左边点击增行表格数据
      addLeftTableData: [],
      // 左边表格数据
      leftTableData: [],
      middleTableData: [],
      rightTableData: [],
      //  add表格的行被点击的时候保存的当前行对象
      addTableCurrentRowObj: {},
      // 保存当前年份中，总店下面所有店铺的同一年的大对象
      middleBigObj: {},
      // 保存最右边表格后端返回的大对象
      rightBigObj: {},
      //
      addRowflag: true
    }
  },
  created() {
    //   获取年月
    this.yearMonthPickerSelectValue = this.getYearMonth()
    this.get_store_no_data()
  },
  methods: {
    // 点击增行按钮的时候，触发的函数
    addBtnClick() {
      if (this.addRowflag) {
        console.log('okok')
        this.isShowAddTable = true
        this.isShowQueryTable = false
        const addParamsObj = {
          // year: this.getYear(),
          year: '',
          target: '',
          type: 1
        }
        this.addLeftTableData.push(addParamsObj)
        // 创建第一行之后，不保存不给创建
        this.addRowflag = false
        return
      }
      return this.$message.warning('请保存再增行')
    },

    // 获取店铺的api
    async get_store_no_data() {
      const { data: res } = await get_store_no_data_api()
      console.log(res, 'get_store_no_data_api')
      this.storePullSelectList = res.data
    },
    // add表格的行被点击的时候
    handleAddTableRowClick(row) {
      console.log(row, 'handleAddTableRowClick')
      this.addTableCurrentRowObj = row
    },
    // 保存按钮被点击的时候，触发的函数
    async keepBtnClick() {
      console.log('keepBtnClick')
      if (!Object.keys(this.addTableCurrentRowObj).length)
        return this.$message.warning('请选中表格中要保存的年份')
      const { data: res } = await keep_year_target_data_api(
        this.addTableCurrentRowObj
      )
      if (res.code !== 200) return
      console.log(res, 'keepBtnClick')
      this.$message.success('保存成功')
      // 可以创建新行
      this.addRowflag = true
    },
    //   查询按钮被点击
    async queryBtnClick() {
      // 清空增行选中的对象
      this.addTableCurrentRowObj = {}
      // 点击查询的时候，要让增行的标志行的通
      this.addRowflag = true
      this.addLeftTableData = []
      this.middleTableData = []
      // 清空右边表格数据
      this.rightTableData = []
      this.isShowAddTable = false
      this.isShowQueryTable = true
      const paramsObj = {
        directSaleNo: this.storePullSelectvalue,
        yearMonth: this.yearMonthPickerSelectValue
      }
      const { data: res } = await query_year_plan_data_api(paramsObj)
      //   暂时没有数据
      console.log(res.data, 'query_year_plan_data_api')
      if (res.code !== 200) return
      // 查询成功
      this.leftTableData = res.data.total
      // 遍历对象，展开push到新的数组
      // const yareList = []
      // for (const key in res.data.yare) {
      //   // console.log(res.data.yare[key], 'item')
      //   yareList.push(...res.data.yare[key])
      // }
      // // console.log(yareList, 'yareList')
      // this.middleTableData = yareList
      // this.rightTableData = res.data.month
      // 保存当前年份中，总店下面所有店铺的同一年的大对象
      this.middleBigObj = res.data.yare

      // 保存所有年份中月份的大对象
      this.rightBigObj = res.data.month
      //
    },
    // 左边表格row被点击
    leftTableRowClick(row) {
      // console.log(row, 'leftTableRowClick')
      this.middleTableData = this.middleBigObj[row.year]
    },
    // 中间表格行被点击
    middleTableRowClick(row) {
      console.log(row.directSaleNo + '!!!' + row.year, 'middleTableRowClick')
      console.log(this.rightBigObj[row.directSaleNo + '!!!' + row.year], '1111')
      this.rightTableData =
        this.rightBigObj[row.directSaleNo + '!!!' + row.year]
      console.log(this.rightTableData, 'this.rightTableData')
    },
    // 修改年总目标
    async leftTableInputBlur(row) {
      console.log(row, 'leftTableInputBlur')
      const { data: res } = await edit_year_target_data_api(row)
      console.log(res, 'edit_year_target_data_api')
      if (res.code !== 200) return
      this.$message.success('保存成功')
    },
    async middleTableInputBlur(row) {
      console.log(row, 'middleTableInputBlur')
      const { data: res } = await edit_store_year_target_data_api(row)
      console.log(res, 'edit_store_year_target_data_api')
      if (res.code !== 200) return
      this.$message.success('保存成功')
    },
    async rightTableInputBlur(row) {
      console.log(row, 'rightTableInputBlur')
      const { data: res } = await edit_store_month_target_data_api(row)
      console.log(res, 'edit_store_month_target_data_api')
      if (res.code !== 200) return
      this.$message.success('保存成功')
    }
  }
}
</script>

<style lang="less" scoped>
.store_year_plan_container {
  background-color: #fff;
  padding: 10px;
}
.line {
  width: 100%;
  border-bottom: 2px solid #f4f4f4;
  margin-top: 10px;
  margin-bottom: 10px;
}
.table_line {
  height: 600px;
  background-color: #f7f7f7;
  margin-left: 5px;
  margin-right: 5px;
  width: 2px;
}
.first_container {
  //输入框的样式
  // input输入框的样式
  /deep/.el-input {
    .el-input__icon {
      line-height: 34px;
    }
    // 宽度生效
    width: 150px;
    height: 32px;
    .el-input__inner {
      height: 32px;
    }
  }
}
.third_container {
  margin-top: 10px;
  display: flex;
}
// 添加表格的样式
.add_table {
  /deep/.cell {
    padding: 4px;
  }
  //输入框的样式
  // input输入框的样式
  /deep/.el-input {
    //icon样式
    .el-input__icon {
      line-height: 34px;
    }
    // 宽度生效
    width: 150px;
    height: 32px;
    .el-input__inner {
      height: 32px;
    }
  }
}
// 除了add表格，表格中input的样式
.left_table,
.middle_table,
.right_table {
  .el-input {
    padding: 4px;
    box-sizing: border-box;
  }
}
</style>
